<template>
  <div class="uerManagement">
    <h5 style="margin-bottom:15px;">
      <span>操作日志</span>
    </h5>
    <!-- <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="操作用户" prop="Msg">
        <el-input
          v-model="queryParams.Msg"
          placeholder="请输入操作用户"
          clearable
          style="width: 240px;"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="日期:" prop="createTime">
        <el-date-picker
          v-model="indatetime"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form> -->
    <div>
      <el-table  ref="multipleTable" tooltip-effect="dark" style="width: 100%" border
        :data="tableData.slice((currentPage - 1) * pagesize,currentPage * pagesize)" >
        <el-table-column prop="Id" label="日志编号" />
        <el-table-column prop="Msg" label="操作人" />
        <el-table-column prop="LogsIp" label="操作地址" />
        <el-table-column prop="LogType" label="操作内容" />
        <el-table-column prop="CreateTime" label="操作日期"  :formatter="timestampToTime"/>
      </el-table>
    </div>
    <div class="fenye">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 总条数
      total: 0,
      currentPage: 1,
      pagesize: 10,
      indatetime: [], //时间
      tableData: [], //列表
      userListAll: "",
      queryParams: {
		Msg: undefined,
		start:undefined,
		end:undefined,
      },
      token:
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2MzI0ODUzNjQsInVzZXJfaWQiOjEzNiwidXNlcl9waG9uZSI6IjE1MTMxNjMyMDUzIiwidXNlcl9uaWNrIjoi6aaZ6JWJIiwidXNlcl9pb2MiOiJodHRwczovL2NrbGNvay5vc3MtY24temhhbmdqaWFrb3UuYWxpeXVuY3MuY29tL3VzZXJpY28vMTM2LnBuZyIsInJlY29tbWVuZF91c2VyIjowfQ.OE2PIhmSgeoa9nkwwfN-SiqVqqVtBHzkO1jNfCyTxJs"
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
	timestampToTime(row, column, cellValue, index) { //*1000-10位
		if (cellValue == null || cellValue == "") return "";
		// 	var date = new Date(row.CreateTime) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
		let date = new Date(parseInt(cellValue)*1000);//时间戳为10位需*1000，如果为13位的话不需乘1000。
		let Y = date.getFullYear() + '-';
		let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
		let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
		let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
		let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
		let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
		return Y + M + D + h + m + s;
		console.log(timestampToTime (1533293827000))
	},

    getList() {
      if (this.indatetime) { //搜索时间区间 -传时间戳
        this.queryParams.start = Date.parse(this.indatetime[0]);
        this.queryParams.end = Date.parse(this.indatetime[1]);
      }
	  let params ={
		  Msg:this.queryParams.Msg,
		  start:this.queryParams.start,
		  end:this.queryParams.end,
	  }
	  console.log(params,'传参===')
      this.axios({
        method: "get",
		// url: "/user/logs?start="+this.queryParams.start  + '&end=' + this.queryParams.end ,
		url: "/user/logs" ,
		data:JSON.stringify(params),
        headers: {
          Authorization: "Bearer " + this.token
        }
      }).then(res => {
        console.log("操作日志列表---", res);
        this.tableData = res.data.data;
        this.total = res.data.data.length;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.currentPage = 1;
	  this.getList();
	  console.log(this.queryParams,'查询按钮')
    },
    /** 重置按钮操作 */
	resetQuery() {
		this.queryParams = {
			Msg:'',
			start:'',
			end:'',
		},
		this.indatetime = [];
		this.handleQuery();
	},
    handleSizeChange(size) {
      this.pagesize = size;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },

  }
};
</script>

<style scoped>
.item >>> .el-date-editor .el-range-separator {
  padding: 0px 0px !important;
}
.uerManagement-header {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
}
/* 搜索input框 */
.search-inp {
  display: flex;
  flex-wrap: wrap;
}
.search-inp .item {
  width: 330px;
  margin-bottom: 6px;
}
.search-inp .item-text {
  width: 100px;
  text-align: right;
  display: inline-block;
  margin-right: 10px;
}
/* 搜索按钮 */
.search-btn {
  width: 460px;
  margin-left: 168px;
}
.search-btn span {
  margin-right: 20px;
}

.table {
  margin-top: 20px;
}
</style>